<div class="h-100 d-flex flex-column flex-fill">
  <div class=" f-section py-0">
    <div class="f-section-header">
      <div class="f-title">
        <h4 class="f-title-text">组件信息</h4>
      </div>
    </div>
    <div class="f-section-content">
      <div class="f-form-layout farris-form farris-form-controls-inline">
        <div class="col-12 farris-group-wrap">
          <div class="form-group farris-form-group">
            <label class="col-form-label" style="justify-content: start !important; width: 80px !important;">
              <span class="farris-label-info text-danger">*</span>
              <span class="farris-label-text">组件标题</span></label>
            <div class="farris-input-wrap">
              <input class="form-control" type="input" [(ngModel)]="componentTitle">
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="  f-section f-utils-fill-flex-column flex-fill pt-1">
    <div class="f-section-header mb-0">
      <div class="f-title">
        <h4 class="f-title-text">组件字段</h4>
      </div>
    </div>
    <div class="f-section-content f-utils-fill d-flex">
      <farris-treetable #treeTable [data]="treeData" [columns]="treeCols" [idField]="'id'" [fixedHeader]="true"
        [fit]="true" [singleSelect]="false" [showFilterBar]="true" [resizableColumns]="true" [showCheckAll]="false"
        [showCheckbox]="true" [checkOnSelect]="true" [selectOnCheck]="true" [showBorder]="true" [striped]="false"
        [searchFields]="[{ label: '字段名称', value: 'name' }]" (search)="searchField($event)"
        (clearSearchValue)="searchField($event)">
      </farris-treetable>
    </div>
  </div>


</div>

<ng-template #footer>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>



<ng-template #bindFieldColTpl let-ctx>
  <ng-container *ngIf="ctx.node.isRemoved ">
    <span [title]="'在schema中匹配id为'+ctx.node.data.id+'的字段失败，请手动移除。'">绑定字段不存在，请在视图模型中手动移除。 </span>
  </ng-container>
  <ng-container *ngIf="ctx.node.isBindVariable ">
    <span>变量：{{ctx.node.data.code}} </span>
  </ng-container>
  <ng-container *ngIf="ctx.node.isNoBinding ">
    <span>控件没有绑定信息 </span>
  </ng-container>
  <ng-container *ngIf="!ctx.node.isRemoved && !ctx.node.isBindVariable && !ctx.node.isComplexField">
    <span>{{ctx.node.data.bindingField}}</span>
  </ng-container>
</ng-template>